<template>
   <div class="box">
      <section class='m-calendar' :style="dateStyle">
     <!-- 切换月份 -->
     <header class='changeMonth'>
       <span class='prepMonth' @click="changeMonth(-1)"></span>
       <h1>{{year}}年{{month}}月</h1>
       <span class='nextMonth' @click="changeMonth(1)"></span>
     </header>
     <ul class='dates'>
       <!-- 星期 -->
       <li class='weeks' v-for="item in weeks" :key="item">{{item}}</li>
       <!-- 日期 -->
       <li
         class='day'
         v-for="(item, i) in dates" :key="i"
         :class="{
           isPrep: item.isPrep,
           isNext: item.isNext,
           hidden: (item.isNext || item.isPrep) && !showPrepNext,
           isToday: item.date == today,
           isSelected: item.date == selectedDate,
           isMarked: markDates.includes(item.date)
         }"
         @click="clickDate(item)"
       >{{item.date == today ? '今' : item.day}}</li>
     </ul>
   </section>
   <img style="margin-left: 60px;" src="@/assets/no-data.png"/>
   <div>
      <el-button style="margin-left: 108px;" type="primary" @click="drawer  = true">{{$t('home.addevent1')}}</el-button>
      <el-drawer v-model="drawer " title="I am the title" :with-header="false">
    <span>
      <span :title="$t('home.addevent')" style="font-size: 18px;display: block;height: 10%;">{{ $t('home.addevent') }}</span>
     <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px"
     size="default" @submit.prevent>
     <el-form-item :label="$t('home.eventName')" prop="name">
       <el-input v-model="formData.name" type="text" clearable></el-input>
     </el-form-item>
     <el-form-item :label="$t('home.eventTime')" prop="radio" class="required">
       <el-radio-group v-model="formData.radio">
         <el-radio v-for="(item, index) in radioptions" :key="index" :label="item.value"
           :disabled="item.disabled" style="{display: inline}">{{item.label}}</el-radio>
       </el-radio-group>
     </el-form-item>
     <el-form-item :label="$t('home.Time')" prop="time" class="required">
       <el-time-picker is-range v-model="formData.time" class="full-width-input" format="HH:mm:ss"
         value-format="HH:mm:ss" clearable></el-time-picker>
     </el-form-item>
     <el-form-item :label="$t('home.Data')" prop="date" class="required">
       <el-date-picker is-range v-model="formData.date" type="daterange" class="full-width-input"
         format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable></el-date-picker>
     </el-form-item>
     <el-form-item label="" prop="select">
       <el-select v-model="formData.select" class="full-width-input" clearable>
         <el-option v-for="(item, index) in selectptions" :key="index" :label="item.label"
           :value="item.value" :disabled="item.disabled"></el-option>
       </el-select>
     </el-form-item>
     <el-form-item :label="$t('home.Place')" prop="address">
       <el-input v-model="formData.address" type="text" clearable></el-input>
     </el-form-item>
     <el-form-item :label="$t('home.remark')" prop="remark">
       <el-input type="textarea" v-model="formData.remark" rows="3"></el-input>
     </el-form-item>
   </el-form>
    </span>
    <el-form-item>
      <el-button type="primary" style="margin-left: 80px;" @click="onSubmit">{{$t('home.confirm')}}</el-button>
      <el-button type="primary" style="margin-left: 360px;margin-top: -30px;"> {{$t('home.cancel')}} </el-button>
    </el-form-item>
  </el-drawer>
   </div>
 
   </div>
   <div class="box1">
      <el-carousel :interval="1500" type="card" height="200px" style="width: 700px; margin-left: 100px;" >
      <el-carousel-item v-for="item in imgList" :key="item.id">
      <img style="object-fit: scale-down; width: 100%; height: 100%;" :src="item.idView" class="image">
      </el-carousel-item>
      </el-carousel>
   </div>
   <div class="box2">
         <el-divider>
            <el-icon><StarFilled /></el-icon>
         </el-divider>
         <span style="font-size: 20px;"><el-icon style="font-size: 15px;"><Flag /></el-icon>{{$t('home.crouse')}}</span>
         <img
          src="../assets/JAVA.jpg"
          @click="docs"
          style="float: right; height: 133px; padding-right: 82% "/>
          <img 
           src="../assets/ggkfs.png" 
           @click="grtReform"
           style="float: right; height: 104px;
            margin-right: 497px;
            margin-top: -115px;"/>
            <img 
             src="../assets/xzg.png"
             @click="grtNewChina"
             style="margin-left: 363px;height: 104px;margin-bottom: -161px;"
             />
             <img 
              src="../assets/mks.png"
              @click="grtMks"
              style="margin-left: 696px;height: 104px;margin-top: -147px;"
              />
   </div>
 </template>
 
 <script>
 import { defineComponent, ref,toRefs,reactive,getCurrentInstance,} from 'vue'
 import { StarFilled,Flag } from '@element-plus/icons-vue'
 const D = new Date()
  const ThisYear = D.getFullYear()
  const ThisMonth = D.getMonth() + 1
  const today = new Date().toLocaleDateString()
  const drawer = ref(false)
 export default defineComponent({
     components: {StarFilled,Flag},
      // props都为非必传
     props: {
       // 初始年月
      startYearMonth: {
        type: String,
        default () {
          return `${ThisYear}/${ThisMonth}`
          // 格式：2021-1或2020-01或者2020/1或者2020/01
        }
      },
      // 需要标记的日期数组
      markDate: {
        type: Array,
        default () {
          return []
          // 格式：['2020-01-01', '2020-02-12']
        }
      },
      // 选中的日期
      checkedDate: {
        type: String,
        default () {
          return ''
          // 格式：'2020-01-01'
        }
      },
      // 是否星期一开始，默认星期日开始
      mondayStart: {
        type: Boolean,
        default () {
          return false
        }
      },
      // 是否显示上个月和下个月日期
      showPrepNext: {
        type: Boolean,
        default () {
          return true
        }
      },
      // 日期字体颜色
      fontColor: {
        type: String,
        default () {
          return '#000'
        }
      },
      // 标记点颜色
      markColor: {
        type: String,
        default () {
          return '#ff6633'
        }
      },
      // 选中的日期字体颜色
      activeColor: {
        type: String,
        default () {
          return '#fff'
        }
      },
      // 选中的日期背景颜色
      activeBgColor: {
        type: String,
        default () {
          return '#ff6633'
        }
      }
     },
     setup() {
       const state = reactive({
         formData: {
           name: "",
           radio: 2,
           time: [],
           date: [],
           select: 2,
           address: "",
           remark: "",
         },
         rules: {
           radio: [{
             required: true,
             message: '字段值不可为空',
           }],
           time: [{
             required: true,
             message: '字段值不可为空',
           }],
           date: [{
             required: true,
             message: '字段值不可为空',
           }],
         },
         radioptions: [{
           "label": "全天",
           "value": "1"
         }, {
           "label": "非全天",
           "value": 2
         }],
         selectptions: [{
           "label": "不重复",
           "value": 1
         }, {
           "label": "每天",
           "value": 2
         }, {
           "label": "每周",
           "value": 3
         }, {
           "value": 4,
           "label": "每个工作日（周一至周五）"
         }, {
           "value": 5,
           "label": "每个休息日（周六和周日）"
         }, {
           "value": 6,
           "label": "自定义"
         }],
       })
       const instance = getCurrentInstance()
       const submitForm = () => {
         instance.proxy.$refs['vForm'].validate(valid => {
           if (!valid) return
           //TODO: 提交表单
         })
       }
       const resetForm = () => {
         instance.proxy.$refs['vForm'].resetFields()
       }
       return {
         ...toRefs(state),
         submitForm,
         resetForm,
         StarFilled
       }
     }, 
    data () {
      return {
        // 当前年
        year: ThisYear,
        // 当前月
        month: ThisMonth,
        // 今天
        today,
        // 日期数组
        dates: [],
        // 选中的日期
        selectedDate: '',
        drawer,
        imgList:[
            {id:0,idView:require("@/assets/sylb.jpg")},
            {id:1,idView:require("@/assets/sylb.png")},
            {id:2,idView:require("@/assets/sylb1.jpg")},
            {id:3,idView:require("@/assets/sylb2.jpg")},
            {id:4,idView:require("@/assets/sylb3.jpg")},
         ],
         screenWidth:0
      }
    },
    computed: {
      // 标记的日期
      markDates () {
        // 获得不带0的日期，如：2021/1/1  =>  2021/1/1
        return this.markDate.map(item => this.formatDate(item))
      },
      // 星期
      weeks () {
        if (this.mondayStart) {
          return ['一', '二', '三', '四', '五', '六', '日']
        } else {
          return ['日', '一', '二', '三', '四', '五', '六']
        }
      },
      dateStyle () {
        return {
          '--font-color': this.fontColor,
          '--mark-color': this.markColor,
          '--active-color': this.activeColor,
          '--active-bg-color': this.activeBgColor
        }
      }
    },
    created () {
      this.year = new Date(this.startYearMonth).getFullYear()
      this.month = new Date(this.startYearMonth).getMonth() + 1
      // 选中的日期
      if (this.checkedDate) {
        // 获得不带0的日期，如：2021-1-1  =>  2021/1/1
        this.selectedDate = this.formatDate(this.checkedDate)
      }
      // 初始化日历
      this.initCalendar()
    },
    methods: {
      docs(){
         this.$router.push({
                    name:"oran"
                  });
      },
      grtReform(){
         this.$router.push({
                    name:"reform"
                  });
      },
      grtNewChina(){
         this.$router.push({
                    name:"newchina"
                  });
      },
      grtMks(){
         this.$router.push({
                    name:"mks"
                  });
      },
      // 初始化日历
      initCalendar () {
        // ⚠️注意：new Date中的month要减1才是真正的本月月数，即本月：this.month - 1，下个月：this.month
        // ⚠️注意：下个月的第0天即为本月的最后一天
        // 上个月总天数（本月第0天日期）
        const prepMonthDays = new Date(this.year, this.month - 1, 0).getDate()
        // 上个月最后一天星期几（本月第0天星期数）
        const prepMonthEndDayWeek = new Date(this.year, this.month - 1, 0).getDay()
        // 当前月总天数（下个月第0天日期）
        const thisMonthDays = new Date(this.year, this.month, 0).getDate()
        // 当前月第一天是星期几
        const firstDayWeek = new Date(this.year, this.month - 1, 1).getDay()
        // 当前月最后一天是星期几（下个月第0天星期数）
        const thisEndDayWeek = new Date(this.year, this.month, 0).getDay()
        var dates = []
        // 需要计算的总天数
        var totalDays = firstDayWeek + thisMonthDays
        // 从星期一开始index为1，从星期天开始index为0
        var index = this.mondayStart ? 1 : 0
        // 星期一开始且本月最后一天是星期天之后，需补满最后一行
        if (this.mondayStart && thisEndDayWeek > 0) {
          totalDays += 7 - thisEndDayWeek
        } else if (!this.mondayStart && thisEndDayWeek < 6) {
          // 星期天开始且本月最后一天是星期天之前，需补满最后一行
          totalDays += 6 - thisEndDayWeek
        }
        for (index; index < totalDays; index++) {
          // 上个月月底
          if (index < firstDayWeek) {
            // 上个月天数 - 上个月最后一天星期数 + 下标 (如：31 - 5 + 0)
            const day = prepMonthDays - prepMonthEndDayWeek + index
            const date = new Date(this.year, this.month - 2, day).toLocaleDateString()
            dates.push({ isPrep: true, day, date })
          } else if (index >= firstDayWeek + thisMonthDays) {
            // 下个月月初
            // 下标 - 当前月总天数 - 当前月第一天星期数 + 1 (如：30 - 31 + 1 + 1)
            const day = index - thisMonthDays - firstDayWeek + 1
            const date = new Date(this.year, this.month, day).toLocaleDateString()
            dates.push({ isNext: true, day, date })
          } else {
            // 本月
            // 下标 - 当前月第一天星期数 + 1 (如：5 - 5 + 1)
            const day = index - firstDayWeek + 1
            const date = new Date(this.year, this.month - 1, day).toLocaleDateString()
            dates.push({ day, date })
          }
        }
        this.dates = [...dates]
      },
      // 点击日期
      clickDate ({ date, isPrep, isNext }) {
        if (isPrep || isNext) return
        this.selectedDate = date
        this.$emit('clickDate', date.replace(/\//g, '-'))
      },
      // 切换月份
      changeMonth (month) {
        this.month += month
        if (this.month === 0) {
          this.month = 12
          this.year--
        } else if (this.month === 13) {
          this.month = 1
          this.year++
        }
        this.initCalendar()
        this.$emit('changeMonth', `${this.year}-${this.month}`)
      },
      // 格式化日期
      formatDate (date) {
        // 获得不带0，且分隔符为/的日期，如：2020-01-01  =>  2021/1/1
        return new Date(date).toLocaleDateString()
      },
      onSubmit(){
         var that = this;
         window.http.post('/api/course/onSubmit',this.formData).then(res => {
            var data = res.data;
            if(data.success){
               that.$message.success('添加成功');
            }
         }) 
         .catch(function(error){
            that.$message.error('服务器异常');
         });
      },
      
    }
   })
   
 </script>
 <style lang='scss' scoped>
   $fontColor: var(--font-color);
   $markColor: var(--mark-color);
   $activeColor: var(--active-color);
   $activeBgColor: var(--active-bg-color);
   .m-calendar{
     max-width: 400px;
     max-height: 450px;
     border-radius: 8px 8px 0 0;
     padding-bottom: 20px;
     header{
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 20px 0;
       margin-bottom: 5px;
       h1{
         margin: 0 20px;
         color: #444;
         font-size: 20px;
         font-weight: bold;
         width: 120px;
         text-align: center;
       }
       span{
         cursor: pointer;
         padding: 4px 10px;
         &::after{
           display: inline-block;
           content: '';
           width: 10px;
           height: 10px;
           border-top: 2px solid $fontColor;
         }
         &.prepMonth::after{
           border-left: 2px solid $fontColor;
           transform: rotate(-45deg);
         }
         &.nextMonth::after{
           border-right: 2px solid $fontColor;
           transform: rotate(45deg);
         }
         &:hover::after{
           border-color: $markColor;
         }
       }
     }
     ul{
       display: flex;
       flex-wrap: wrap;
       margin: 0 auto;
       padding: 0 12px;
       li{
         width: 42px;
         height: 42px;
         margin: 4px calc((100% / 7 - 42px) / 2);
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         font-weight: bold;
         position: relative;
         transition: all ease .25s;
         border-radius: 6px;
         // 标记
         &::after{
           bottom: 0;
           left: 50%;
           transform: translateX(-50%);
           position: absolute;
           display: inline-block;
           content: '';
           width: 5px;
           height: 5px;
           border-radius: 50%;
         }
         // 星期
         &.weeks{
           font-size: 18px;
           color: #444;
           margin-bottom: 12px;
         }
         &.day{
           cursor: pointer;
           font-size: 20px;
           color: $fontColor;
           // 今天
           &.isToday{
             color: $markColor;
           }
           // 标记
           &.isMarked::after{
             transition: all ease .25s;
             background: $markColor;
           }
           // 选中、hover
           &:hover, &.isSelected{
             background: $activeBgColor;
             color: $activeColor;
             &:after{
               display: none;
             }
           }
           // 上个月、下个月
           &.isNext, &.isPrep{
             cursor: default;
             opacity: .3;
             &:hover{
               color: $fontColor;
               opacity: .3;
               background: transparent;
             }
           }
           // hidden
           &.hidden{
             opacity: 0;
             &:hover{
               opacity: 0;
             }
           }
         }
       }
     }
   }
   .box{
      width: 500px;
   }
   .box1{
      width: 900px;
      margin-left: 500px;
      margin-top: -500px;
   }
   .box2{
   margin-top: 70px;
   margin-left: 550px;
   }
 </style>
 